<template>
	<div>
		<el-card>
			<div slot="header">
				<span>商品列表</span>
			</div>

			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form
							label-position="left"
							inline
							class="demo-table-expand"
						>
							<el-form-item label="商品 ID">
								<span>{{ props.row.id }}</span>
							</el-form-item>
							<el-form-item label="商品名称">
								<span>{{ props.row.name }}</span>
							</el-form-item>
							<el-form-item label="所属分类">
								<span>{{ props.row.category }}</span>
							</el-form-item>
							<el-form-item label="商品价格">
								<span>{{ props.row.price }}</span>
							</el-form-item>
							<el-form-item label="商品图片">
								<!-- <span>{{ props.row.imgUrl }}</span> -->
								<img
									:src="props.row.imgUrl"
									width="100px"
									height="100px"
								/>
							</el-form-item>
							<el-form-item label="创建时间">
								<span>{{
									props.row.ctime | formatYMDhms
								}}</span>
							</el-form-item>
							<el-form-item label="商品评价">
								<span>{{ props.row.rating }}</span>
							</el-form-item>
							<el-form-item label="商品销量">
								<span>{{ props.row.sellCount }}</span>
							</el-form-item>
							<el-form-item label="商品描述">
								<span>{{ props.row.goodsDesc }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="商品名称" prop="name">
				</el-table-column>
				<el-table-column label="所属分类" prop="category">
				</el-table-column>
				<el-table-column label="商品价格" prop="price">
				</el-table-column>
				<el-table-column label="商品图片" prop="imgUrl">
					<template slot-scope="{ row }">
						<img :src="row.imgUrl" width="100px" height="100px" />
					</template>
				</el-table-column>
				<el-table-column label="商品描述" prop="goodsDesc">
				</el-table-column>
				<el-table-column label="操作" prop="desc" width="150">
					<template slot-scope="{ row }">
						<el-button
							type="success"
							class="fff gree mrPx-8"
							@click="handleEdit(row)"
							>编辑</el-button
						>
						<el-popconfirm
							confirm-button-text="确定"
							cancel-button-text="不用了"
							icon="el-icon-info"
							icon-color="red"
							title="这一条数据确定要删除吗？"
							@confirm="handleDel(row.id)"
						>
							<el-button
								slot="reference"
								class="del"
								type="danger"
								>删除</el-button
							>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				class="my-15"
				:current-page="currentPage"
				:page-sizes="[2, 10, 15]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</el-card>

		<!-- 抽屉 -->
		<el-drawer
			title="商品修改"
			:visible.sync="drawer"
      :wrapperClosable="false"
		>
			<el-form
      label-width="80px"
				:model="drawerData"
			>
				<el-form-item label="商品名称">
					<el-input type="text" v-model="drawerData.name"></el-input>
				</el-form-item>
				<el-form-item label="所属分类">
					<!-- <el-input
						type="text"
						v-model="drawerData.category"
					></el-input> -->
					 <el-select
            placeholder="请选择商品分类"
            v-model="drawerData.category"
            clearable
          >
            <el-option v-for="(v,i) in goodsCategories" :key="i" :label="v" :value="v"></el-option>
          </el-select>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input type="text" v-model="drawerData.price"></el-input>
				</el-form-item>
				<el-form-item label="商品图片">
					<!-- <img :src="props.row.imgUrl" width="100px" height="100px" /> -->

					<el-upload
						class="avatar-uploader"
						action="http://sell.h5.itsource.cn:8087/goods/goods_img_upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img
							v-if="drawerData.imgUrl"
							:src="drawerData.imgUrl"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="商品描述">
					<el-input
          class="text-area"
						type="textarea"
						v-model="drawerData.goodsDesc"
					></el-input>
				</el-form-item>
        <el-form-item>
          <el-button @click="drawer=false">取消</el-button>
          <el-button type="success" class="fff gree" @click="handleConfirm">确认</el-button>
        </el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	import { api_goods_edit, api_goods_list,api_goods_del } from "@/apis/goods";
import { mapState,mapActions } from 'vuex';
    
	export default {
		data() {
			return {
				tableData: [
					// {
					// 	id: "12987122",
					// 	name: "好滋好味鸡蛋仔",
					// 	category: "江浙小吃、小吃零食",
					// 	price: "荷兰优质淡奶，奶香浓而不腻",
					// 	imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F09%2F20210609081952_51ef5.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678934930&t=bd0321fbc966d77eab9bd7a8e6271ea0",
					// 	goodsDesc: "王小虎夫妻店",
					// 	ctime: "2023-02-31",
					// 	rating: "好吃好吃",
					// 	sellCount: 23,
					// },
				],
				drawerData: {},
				currentPage: 1, //前往第几页
				total: 0, //总共条数
				pageSize: 2, //每页显示几条
				drawer: false,
			};
		},
		computed:{
			// 调用vuex中的获取商品分类数据
          ...mapState('goods',['goodsCategories'])
		},
		created() {
			this.getGoodsList();
			// 调用vuex中的获取商品分类请求函数
			this.$_GOODS_CATE()
		},
		methods: {
			...mapActions('goods',['$_GOODS_CATE']),
			// 获取列表
			async getGoodsList() {
				const res = await api_goods_list({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				});
				this.tableData = res.data.data;
				this.total = res.data.total;
				// 解决页面Element末尾一条数据被删除之后，不会自动向前跳一页再获取数据，而是停留在当前页面显示数据为空
				if (res.data.data.length == 0 && this.currentPage != 1) {
					this.currentPage--;
					this.getGoodsList();
				}
			},
			handleSizeChange(size) {
				this.pageSize = size;
				this.getGoodsList();
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getGoodsList();
			},
			// 编辑修改商品数据
handleEdit(row){
  this.drawerData={...row}
  this.drawer=true
},
// 确认修改
async handleConfirm(){
 const res= await api_goods_edit(this.drawerData)
 if(res.data.code==0){
  this.drawer=false
  this.getGoodsList();
 }
//  console.log(res);	
},
// 删除商品
async handleDel(id){
    const res = await api_goods_del({id})
    if(res.data.code==0){
      this.getGoodsList();
    }
    // console.log(res); 
},


// 上传图片之前的钩子
            beforeAvatarUpload(file) {
				// file.type === 'image/jpeg';
				const isJPG = /(png|jpeg|webp)/.test(file.type);
				const isLt2M = file.size / 1024 / 1024 / 1024 < 20;

				if (!isJPG) {
					this.$message.error(
						"上传头像图片只能是 JPG/png/webp 格式!"
					);
				}
				if (!isLt2M) {
					this.$message.error("上传头像图片大小不能超过 20MB!");
				}
				return isJPG && isLt2M;
			},
            // 上传成功时钩子函数
			async handleAvatarSuccess(res) {
				let { code, msg, imgUrl } = res;
				if (code == 0) {
					this.drawerData.imgUrl=imgUrl
         
				}
			},


		},
	};
</script>

<style lang="scss" scoped>
	.demo-table-expand {
		font-size: 0;
	}
	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}



.el-input {
		width: 205px;
	}

	.text-area {
		width: 205px;
	}

	::v-deep .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}


</style>
